<script setup>
import annualFeeService from '@/api/annualFee/index.js'
import BaseForm from '@/components/BaseForm/BaseForm.vue'
import { useDict } from '@/utils/dict.js'
import DictTag from '@/components/DictTag/index.vue'

const detailParams = defineModel('detailParams', {
  type: Object,
  default: () => ({}),
  required: true,
})
const visible = defineModel('visible', {
  type: Boolean,
  default: false,
})
const formData = ref({})
const { sys_annual_type, gf_record_status, sys_pay_type } = useDict('sys_annual_type', 'gf_record_status', 'sys_pay_type')
const fieldList = reactive([
  {
    label: '客户名称',
    field: 'customerName',
    span: 8,
  },
  {
    label: '合同编号',
    field: 'contractNo',
    span: 8,
  },
  {
    label: '合同金额',
    field: 'patentNo',
    span: 8,
  },
  {
    label: '申请号',
    field: 'applyNumber',
    span: 8,
  },
  {
    label: '业务名称',
    field: 'patentName',
    span: 8,
  },
  {
    label: '业务类型',
    field: 'patentType',
    span: 8,
  },
  {
    label: '缴费节点',
    field: 'feeNode',
    type: 'select',
    options: {
      data: sys_annual_type,
    },
    span: 8,
  },
  {
    label: '年度',
    field: 'year',
    span: 8,
  },
  {
    label: '月度',
    field: 'month',
    span: 8,
  },
  {
    label: '代缴费用',
    field: 'amount',
    span: 8,
  },
  {
    label: '费减比例',
    field: 'feeReduceRate',
    span: 8,
  },
  {
    label: '状态',
    field: 'status',
    type: 'select',
    options: {
      data: gf_record_status,
    },
    span: 8,
  },
  {
    label: '缴费截止日期',
    field: 'deadline',
    type: 'date',
    span: 8,
  },
  {
    label: '实际缴费日期',
    field: 'paymentTime',
    type: 'date',
    span: 8,
  },
  {
    label: '缴费方式',
    field: 'feeType',
    type: 'select',
    options: {
      data: sys_pay_type,
    },
    span: 8,
  },
  {
    label: '备注',
    field: 'remark',
    type: 'textarea',
    span: 24,
  },
])
const tableColumns = reactive([
  {
    type: 'seq',
    width: 50,
    align: 'center',
  },
  { title: '费用种类', field: 'feeName', align: 'center', minWidth: 90 },
  {
    title: '缴费节点',
    field: 'feeNode',
    align: 'center',
    slots: {
      default: ({ row }) => {
        return h(DictTag, {
          options: sys_annual_type.value,
          value: row.feeType,
        })
      },
    },
    filters: sys_annual_type,
  },
  { title: '年度', field: 'year', align: 'center' },
  { title: '月度', field: 'lateMonth', align: 'center' },
  { title: '待缴费用', field: 'realAmount', align: 'center' },
  { title: '费减比例', field: 'feeReduceRate', align: 'center' },
  { title: '状态', field: 'status', align: 'center',
    slots: {
      default: ({ row }) => {
        return h(DictTag, {
          options: gf_record_status.value,
          value: row.status,
        })
      },
    },
    filters: gf_record_status,
  },
  {
    title: '缴费截止日期',
    field: 'deadline',
    align: 'center',
    formatter: ({ cellValue }) => {
      return cellValue ? cellValue.split(' ')[0] : ''
    } },
  {
    title: '实际缴费日期 ',
    field: 'paymentTime',
    align: 'center',
    formatter: ({ cellValue }) => {
      return cellValue ? cellValue.split(' ')[0] : ''
    },
  },
  {
    title: '缴费方式',
    field: 'feeType',
    align: 'center',
    slots: {
      default: ({ row }) => {
        return h(DictTag, {
          options: sys_pay_type.value,
          value: row.feeType,
        })
      },
    },
    filters: sys_pay_type,
  },
])

watch(() => detailParams.value, (val) => {
  if (val) {
    getList()
  }
})

function getList() {
  console.log(detailParams.value)
  annualFeeService.getDetail(detailParams.value.annualfeeId, {
    year: detailParams.value.year,
  }).then((res) => {
    formData.value = res.data
  })
}
function handleClose() {
  visible.value = false
}
</script>

<template>
  <el-drawer
    v-model="visible"
    title="查看"
    size="68%"
    class="custom-drawer"
    :show-close="false"
    top="2%"
    @close="handleClose"
  >
    <template #header>
      <div class="dialog-header">
        <span class="relative top-3 text-[16px] ml-2">
          查看
        </span>
      </div>
    </template>
    <BaseForm
      :field-list="fieldList"
      :model="formData"
      :options="{
        labelWidth: '100px',
        disabled: true,
      }"
      class="mt-3"
    >
      <template #buttons>
        {{}}
      </template>
    </BaseForm>
    <div class="linear-header">
      <span>费用明细</span>
    </div>
    <vxe-grid
      :data="formData.annualFeeDetailVoList"
      :columns="tableColumns"
      max-height="400px"
      class="mt-4"
      header-cell-class-name="headerCellContractClass"
    />
    <div class="linear-header my-6">
      <span>费用文件</span>
    </div>
    <el-empty description="暂无文件">
      <template #image>
        <img src="@/assets/images/empty.png">
      </template>
    </el-empty>
    <div class="close-btn flex-center" @click="handleClose">
      <el-icon>
        <CloseBold />
      </el-icon>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
.close-btn {
  position: fixed;
  top: 50%;
  margin-left: -65px;
  cursor: pointer;
  border: none;
  outline: none;
  width: 45px;
  height: 45px;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  background-color: var(--el-color-primary);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  &:hover {
    background-color: #f56c6c;

    i {
      transition: transform .5s, -webkit-transform .5s;
      transform: rotate(90deg);
    }
  }
}
</style>
